<template>
  <el-card shadow="never" class="chart-card" :body-style="{ padding: '12px 20px 4px' }">
    <div class="chart-card__header">
      <span class="chart-card__title">房源状态分布</span>
      <el-button
        v-if="showRefresh"
        type="text"
        size="mini"
        icon="el-icon-refresh"
        @click="$emit('refresh')"
      >刷新</el-button>
    </div>
    <div class="chart-card__body">
      <el-skeleton :loading="loading" animated>
        <template #template>
          <el-skeleton-item variant="rect" class="chart-card__skeleton" />
        </template>
        <template #default>
          <div v-if="hasData" ref="chart" class="chart-card__chart"></div>
          <el-empty v-else description="暂无数据" :image-size="80" />
        </template>
      </el-skeleton>
    </div>
  </el-card>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons");
import resize from "./mixins/resize";

export default {
  name: "HouseStatusChart",
  mixins: [resize],
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: false,
    },
    showRefresh: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  computed: {
    hasData() {
      return (this.data || []).some((item) => Number(item.value) > 0);
    },
  },
  watch: {
    data: {
      deep: true,
      handler() {
        this.$nextTick(() => {
          this.renderChart();
        });
      },
    },
    loading(value) {
      if (!value) {
        this.$nextTick(() => this.renderChart());
      }
    },
  },
  mounted() {
    this.$nextTick(() => this.renderChart());
  },
  beforeDestroy() {
    this.disposeChart();
  },
  methods: {
    renderChart() {
      if (this.loading || !this.hasData) {
        this.disposeChart();
        return;
      }
      if (!this.chart) {
        this.chart = echarts.init(this.$refs.chart, "macarons");
      }
      const seriesData = (this.data || []).map((item) => ({
        value: Number(item.value) || 0,
        name: item.label,
      }));
      this.chart.setOption(
        {
          tooltip: {
            trigger: "item",
            formatter: (params) => `${params.name}<br/>数量：${params.value} 套 (${params.percent}%)`,
          },
          legend: {
            bottom: 0,
            left: "center",
            type: "scroll",
          },
          series: [
            {
              name: "房源状态",
              type: "pie",
              radius: ["45%", "70%"],
              center: ["50%", "48%"],
              avoidLabelOverlap: true,
              label: {
                formatter: "{b}\n{c} 套 ({d}%)",
                fontSize: 12,
              },
              labelLine: {
                smooth: true,
                length: 12,
                length2: 8,
              },
              data: seriesData,
            },
          ],
        },
        true
      );
    },
    disposeChart() {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.chart-card {
  width: 100%;
  min-height: 320px;

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;

    .chart-card__title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  &__body {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__chart {
    width: 100%;
    height: 260px;
  }

  &__skeleton {
    width: 100%;
    height: 260px;
    border-radius: 12px;
  }
}
</style>
